//加载分页模块
let laypage = layui.laypage
let form = layui.form
// 分页获取文章列表的请求参数
let data = {
    //必填参数
    pagenum: 1, // 页码值，比如2，将获取到第2页的数据
    pagesize: 2, // 每页有多少条数据，比如5，表示每页5条数据
    // cate_id: 1,
    // state: '已发布'
  }
  
  // ------------------ 获取文章并渲染到表格中 ------------------
  function renderArticle() {
    $.ajax({
      url: '/my/article/list',
      data: data,
      success: function (res) {
        // console.log(res);
        // 使用模板引擎，渲染数据
        let html = template('tpl-article', res);
          $('tbody').html(html);
          // 最好, 在这里, 实现分页页码(通过layuilayui分页模块laypage)
          //执行一个laypage实例
          laypage.render({
              elem: 'page', //注意,这里的 test1 是 ID ,不加#号
              count: res.total, //数据总数,从服务端得到
              curr: data.pagenum, //当前页码值  (和ajax获取的页码值保持一致)
              limit: data.pagesize, //每页显示多少条数据(和ajax的请求参数一致)
              limits: [2, 3, 5, 10], //每页显示多少条数据
              layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], //自定义排版
              //jump 是分页后的回调函数(实现分页的时候触发一次, 后续点击页码的时候也会触发)
              jump: function(obj, first) {
                //obj包含了当前分页的所有参数，比如：
                //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                //console.log(obj.limit); //得到每页显示的条数
                // console.log(fist); //第一次实现分页显示true,后续切换页码是undefined
                                    
                //首次不执行
                if(!first){
                  //do something
                    data.pagenum = obj.curr //点击页码之后改变ajax请求参数,然后重新获取数据
                    data.pagesize = obj.limit
                  renderArticle()
                }
              }
          })
      }
    });
  }
renderArticle();
  
//_-------------------获取下拉框的分类-------------------------------
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        let html = template('tpl-category', res);
        $('#category').html(html);
        // 模板引擎处理完之后，重新渲染select
        //动态生成的下拉框必须更新渲染
        form.render('select');

    }
});

//------------------------ 实现筛选 ---------------------------------
$('#search').on('submit', function (e) { 
    e.preventDefault();
  // 获取两个下拉框的值
  let cate_id = $('#category').val();
  let state = $('#state').val();
  // 修改ajax请求的参数
  if (cate_id) {
    data.cate_id = cate_id;
  } else {
    delete data.cate_id; // delete 用于删除对象的属性
  }
 //也可以用三元写作
//  cate_id ? data.cate_id = cate_id : delete data.cate_id
  if (state) {
    data.state = state;
  } else {
    delete data.state;
  }

  // 重置页码为 1
  data.pagenum = 1;

  renderArticle(); // 调用renderArticle();渲染页面即可

})


//-------------- 定义模板引擎过滤器函数  处理时间 ------------------
 // 补零函数
 function addZero (n) {
    return n < 10 ? '0' + n : n;
  }
template.defaults.imports.dateFormat = function (t) {
    let date = new Date(t);
    let y = date.getFullYear();
    let m = addZero(date.getMonth() + 1);
    let d = addZero(date.getDate());
    let h = addZero(date.getHours());
    let mm = addZero(date.getMinutes());
    let s = addZero(date.getSeconds());
    // 时分秒自己写
    return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;
}
  

  
 //*************************** 删除文章 ***************************************************** 
$('tbody').on('click', 'button:contains("删除")', function () {
   // 拿到id
  let id = $(this).data('id');
  // 询问 是否删除
  layer.confirm('确定删除吗？', function (index) {
    // 按照接口文档 调用接口完成删除
    $.ajax({
      // url: '/my/article/delete/2',  --> url: '/my/article/delete/文章id'
      url: '/my/article/delete/' + id,
      success: function (res) {
        layer.msg(res.message);
        if (res.status === 0) {
          //调用函数 渲染页面
          renderArticle();
        }
      }
    });
    // 关闭弹层
    layer.close(index); 
  });
})